<!--
 * @Author: your name
 * @Date: 2020-11-18 09:46:52
 * @LastEditTime: 2021-01-13 15:11:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\pages\forget\index.vue
-->
<template>
  <div class="w1200auto forget ptb50">
    <div class="forget_box">
      <h3 class="size20 b text_c relative ptb20 mb20">{{$t('forget.Forget your password')}}</h3>
      <p class="forget_tips text_c mb20">{{$t('forget.Simply enter your email address here! After clicking submit we‘ll email you a link to a page where you can easily create a new password')}}.</p>
      <el-form :hide-required-asterisk="true" :model="ruleForm" :rules="rules" ref="ruleForm" class="forget-ruleForm" label-position="left">
         <el-form-item prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">{{$t('forget.RESET PASSWORD')}}</el-button>
        </el-form-item>
      </el-form>
      <div class="forget_back underline pointer size16 b text_c ml150" @click="back()">{{$t("Go back")}}</div>
    </div>
  </div>
</template>

<script>

export default {
    asyncData: ({ req }) => {     
        return {

        }
    },   
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
            if (this.ruleForm.checkPass !== '') {
                this.$refs.ruleForm.validateField('checkPass');
            }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };   
        return {
            isChecked: false,
            ruleForm: {
                email: '',
                password: '',
                checkPass: '',
                firstName: '',
                lastName: '',
            },
            rules: {
                email: [
                    { required: true, message: 'This is a required field.', trigger: 'blur' },
                    { type: 'email', message: 'please email.', trigger: ['blur', 'change'] }
                ],
                password: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
                firstName: [
                    { required: true, message: 'This is a required field.', trigger: 'blur' },
                ],
                lastName: [
                    { required: true, message: 'This is a required field.', trigger: 'blur' },
                ]
            },            
        }
    },
    methods: {
        back() {
            this.$router.back(-1);
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                alert('submit!');
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
@import "~/assets/scss/index.scss";
.forget {
    @include flex-center(center);
    &_box {
        width: 400px;
    }
    &_tips {
        table-layout: fixed;
        word-wrap: break-all;
        word-break: normal;
        overflow: hidden;
        line-height: 1.5;
    }
    &_back {
        color: $theme;
    }
}
.forget .el-button {
    width:$s100;
    border-radius: unset;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 14px;
    font-weight: bold;
}
</style>
